import { MdDialog, MdDialogRef, MdDialogConfig } from '@angular/material';
import { Component } from '@angular/core';
import * as lodash from 'lodash';

export class OrderPickUpService {
    private orderPickUp: OrderPickUp;
    static current: OrderPickUpService = new OrderPickUpService();
    dialogRef: MdDialogRef<OrderPickUp>;
    config: MdDialogConfig = {
        disableClose: false,
        width: '100%',
        position: {
            top: '0',
            bottom: '',
            left: '',
            right: ''
        }
    }
    /**
     * 
     * @param orderPickUp 注册等叫叫起dialog对象
     */
    Regist(orderPickUp: OrderPickUp) {
        this.orderPickUp = orderPickUp;
    }
    /**
     * 代开dialog
     * @param dialog 
     */
    open(dialog: MdDialog, type: string, cartList): Promise<string[]> {
        let cartListCopy = lodash.cloneDeep(cartList);
        if (type == "waiting") {
            this.initWaitingItems(cartListCopy);
        }
        this.dialogRef = dialog.open(OrderPickUp, this.config);
        this.orderPickUp.type = type;
        this.orderPickUp.cartList = cartListCopy;
        this.orderPickUp.isCheckAll = this.initIsCheckAll(cartListCopy);
        return new Promise((resolve, reject) => {
            this.dialogRef.afterClosed().subscribe(cartItemIds => {
                this.dialogRef = null;
                resolve(cartItemIds);
            });
        });
    }

    /**
     * 初始化购物车项的选中情况
     * @param cartList  购物车列表 
     */
    initWaitingItems(cartList) {
        lodash(cartList).forEach(cartItem => {
            delete cartItem.checked;
            if (cartItem.extended && cartItem.extended.pickup && cartItem.extended.pickup == "waiting") {
                cartItem.checked = true;
            }
        });
    }
    /**
     * 判断是否是全选
     * @param cartList 购物车列表
     */
    initIsCheckAll(cartList) {
        let result = cartList.filter(item => {
            return item.checked;
        });
        if (result && result.length == cartList.length) {
            return true;
        }
        return false;
    }
}

@Component({
    template: `
        <md-dialog-content class="h100" fxLayout="column">
            <header class="app-header noshrink">
                <span class="i-arrow-back margin-l header-icon" (click)="cancel()"></span>
                <span fxFlex="100%" class="margin-l-xs">{{type=="waiting" ? "等叫" : "叫起"}}</span>
                <div md-ripple [mdRippleCentered]="true" class="margin-r-s padding-s text-s noshrink position-box" (click)="checkAllItems()">
                    <span>{{isCheckAll ? '取消' : '全选'}}</span>
                </div>
            </header>
            <div fxLayout="column">
                <div class="v-scroll" fxFlex="100%">
                    <div class="margin-l-s text-s" *ngIf="cartList && cartList.length">
                        <div class="pickup-list" *ngFor="let item of cartList" fxLayout="row" fxLayoutAlign="start center">
                            <span fxFlex="100%">{{item.inventoryName}}</span>
                            <md-checkbox fxLayout="row" fxLayoutAlign="center center" class="noshrink margin-r" [color]="checkBoxColor" [disableRipple]="true" [checked]="item.checked" (change)="cartItemCheck($event, item)"></md-checkbox>
                        </div>
                    </div>
                </div>
                <button md-button class="color-white bgcolor-accent normal-btn text-m noshrink" (click)="confirm()">
                    <span class="">确定</span>
                </button>
            </div>
        </md-dialog-content >
    `,
    styleUrls: ['../order.component.scss']
})
export class OrderPickUp {
    constructor(
        private dialogRef: MdDialogRef<OrderPickUp>
    ) {
        OrderPickUpService.current.Regist(this);
    }
    type: string;
    cartList;
    isCheckAll: boolean = false;
    checkBoxColor: string = 'primary';
    /**
     * 指定项的change事件
     * @param event change事件对象
     * @param item 指定的项
     */
    cartItemCheck(event, item) {
        if (event.checked) {
            item.checked = true;
        } else {
            item.checked = false;
        }
        let checkedList = this.getCheckedItems();
        if (checkedList && checkedList.length == this.cartList.length) {
            this.isCheckAll = true;
        } else {
            this.isCheckAll = false;
        }
    }

    /**
     * 全选
     * @param event 事件对象
     */
    checkAllItems() {
        this.isCheckAll = !this.isCheckAll;
        lodash(this.cartList).forEach(cart => {
            cart.checked = this.isCheckAll;
        });
    }

    /**
     * 获得选中的项
     */
    getCheckedItems() {
        let result = [];
        if (this.cartList && this.cartList.length) {
            result = this.cartList.filter(item => {
                return item.checked;
            });
        }
        return result;
    }

    /**
     * 确定选择
     */
    confirm() {
        let result = this.getCheckedItems();
        this.dialogRef.close(result);
    }

    /**
     * 取消并关闭dialog
     */
    cancel() {
        this.dialogRef.close(null);
    }

}